<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search">
			<u-search placeholder="请输入产品名" v-model="keyword" :showAction='false' @search='getProducts'></u-search>
		</view>
		<view v-if='products && products.length > 0'>
			<view v-for='(item,index) in products' :key='index' class='list'>
				<view style='padding:5px;'>
					<u-row align='top'>
						<u-col span='4'>
							<view v-if='item.cover == null || item.cover == ""' style='max-height:60px'>
								<u--image :showLoading="true" :src="productImage" width="100%"
									mode='widthFix'></u--image>
							</view>
							<view v-else style='max-height:60px'>
								<u--image :showLoading="true" :src="item.cover" width="100%" mode='widthFix'></u--image>
							</view>
						</u-col>
						<u-col span='8'>
							<view>
								<view class='product-data'>
									<view class='product-name'>{{item.name}}</view>
									<view>
										<u-row>
											<u-col span='6'>
												<view>
													<text class='price'>￥{{item.price}}</text>
												</view>
											</u-col>
											<u-col span='6'>
												<view>
													<view v-if='item.quantity > 0'>
														<u-row>
															<u-col span='4'>
																<view class="minus" @click='pev(item)'>
																	<u-icon name="minus" size="12"></u-icon>
																</view>
															</u-col>
															<u-col span='4'>
																<view style="text-align: center;" class="input">
																	{{item.quantity}}
																</view>
															</u-col>
															<u-col span='4'>
																<view class="plus" @click='add(item)'>
																	<u-icon name="plus" color="#FFFFFF"
																		size="12"></u-icon>
																</view>
															</u-col>
														</u-row>
													</view>
													<view v-else>
														<u-row>
															<u-col span='4'>
																<view>
																</view>
															</u-col>
															<u-col span='4'>
																<view style="text-align: center;" class="input"></view>
															</u-col>
															<u-col span='4'>
																<view class="plus" @click='add(item)'>
																	<u-icon name="plus" color="#FFFFFF"
																		size="12"></u-icon>
																</view>
															</u-col>
														</u-row>
													</view>
												</view>
											</u-col>
										</u-row>
									</view>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
				<u-line></u-line>
			</view>
		</view>
		<view v-else style='padding-top:30vh'>
			<u-empty mode="list" text='暂无搜索结果'>
			</u-empty>
		</view>
		<view>
			<text @click='toCart' class='cart'>购物车</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list: [],
				store: 0,
				products: [],
				productImage: 'https://picture.jmgc.vip/7de4521c-d87c-4a63-b7db-6d51d3ca5c3b.png'
			}
		},
		onReachBottom() {

		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			toCart(){
				uni.switchTab({
					url: '/pages/cart/index'
				})
			},
			getProducts() {
				console.log(this.keyword)
				if (this.keyword == '') {
					uni.showToast({
						title: '请输入搜索内容！',
						icon: 'none'
					})
					return;
				}
				uni.showLoading()
				this.request.get(`public/products`, {
					'@filter': `entity.getName() matches '${this.keyword}'`
				}).then((res) => {
					console.log('dhag', res.data)
					let carts = uni.getStorageSync('carts')
					for (let i of res.data) {
						i['quantity'] = 0
						if (carts != '') {
							for (let c of carts) {
								if (i.id == c.id) {
									i.quantity = c.quantity
								}
							}
						}
					}
					this.products = res.data
					console.log('products', res.data)
					uni.hideLoading()
				})
			},
			add(item) {
				item.quantity++
				this.getCartData(item)
			},
			pev(item) {
				if(item.quantity > 0){
					item.quantity--
				}
				this.getCartData(item)
			},
			getCartData(item){
				let carts = uni.getStorageSync('carts')
				if(carts == ''){
					carts = [item]
				}else{
					let had = false
					for(let i in carts){
						if(carts[i].id == item.id){
							if(item.quantity <= 0){
								carts.splice(i,1)
							}else{
								carts[i].quantity = item.quantity
							}
							had = true
						}
					}
					if(!had){
						carts.push(item)
					}
				}
				uni.setStorageSync('carts',carts)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding:10px;
	}
	
	.batch-btn {
		background-color: #34AF66;
		color: #fff;
		border-radius: 3px;
		height: 34px;
		line-height: 34px;
		text-align: center;
	}
	
	.product-name {
		margin: 3px 10px;
		color: #606266;
		height: 36px; 
		line-height: 18px; 
		overflow: hidden; 
		align-items: center
	}
	
	
	.price {
		padding: 10px;
		color: #f56c6c;
	}
	
	.products {
		width: 100%;
		height: 70vh;
		overflow: auto;
		background-color: #fff;
		float: left;
		padding-top: 10px;
	}
	
	
	.minus {
		width: 30px;
		height: 30px;
		background-color: #fff;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
	
	.minus-1 {
		width: 30px;
		height: 30px;
		background-color: #fff;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
	
	.input {
		color: #606266;
		/* padding: 0 10px; */
	}
	
	.plus {
		width: 30px;
		height: 30px;
		background-color: #19be6b;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
	
	.stock{
		color: #909399;
		font-size: 14px;
		padding: 7px 0px 0px 10px;
	}
	
	.list{
		background-color: #f3f3f3;
		border-radius: 10px;
		margin: 10px 0px;
		padding: 10px;
	}
	
	.cart{
		background-color: #19be6b;
		color: #fff;
		height: 50px;
		width: 50px;
		font-size: 14px;
		text-align: center;
		border-radius: 25px;
		position: fixed;
		bottom: 10px;
		right: 10px;
		line-height: 50px;
	}
</style>